<script setup lang="ts">

import cardImg from "@/assets/images/card.png";

</script>

<template>
    <div class="bindBankCardExcess">
      <div style="text-align: right;">
        <van-image width="180px" height="100%" :src="cardImg"/>
      </div>
      <router-link :to="{name:'bindCard'}" class="bind-card">
        <span style="font-size: 60px;font-weight: bold">+</span>
        <span>{{ $t('bindCardExcess.bindCard') }}</span>
      </router-link>
    </div>
</template>

<style scoped lang="less">
  .bindBankCardExcess {
    padding: 25px;

    .bind-card {
      background-image: url('../../assets/images/bangkabg.png');
      background-size: cover;         /* 背景图片覆盖容器 */
      background-position: center;    /* 图片居中显示 */
      width: 100%;                    /* 设定宽度 */
      height: 200px;                  /* 设定高度 */
      color: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
    }
  }
</style>